<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .am-form {
            border-radius: 5px;
        }

        .pay {
            border: 1px #ccc solid;
            color: #ccc;
            padding: 5px;
            border-radius: 5px;
        }

        .pay:hover {
            border: 2px #FEB74D solid;
            color: #FEB74D;
        }

        .active {
            border: 2px #FEB74D solid !important;
            color: #FEB74D !important;
        }

    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId=${maintenanceCompleteHallOrderId}"
           class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">完成维修
        </a>
    </h1>
</header>
<div class="am-g">
    <div class="am-u-sm-12" style="margin-top: 20px;">
        <form class="am-form whiteBg">
            <fieldset>
                <div class="am-form-group">
                    <label class="font_orange">处理结果</label>
                    <input type="text" class="" id="result">
                </div>
                <div class="am-form-group">
                    <label class="font_orange">用户应付金额</label>
                    <input type="text" class="" id="monye">
                </div>
                <div class="am-form-group">
                    <label class="font_orange">用户应付金额</label>
                    <div style="margin-top:10px;">
                        <%--<span class="pay active" onclick="payNet()">网上支付</span>--%>
                        <span class="pay active"  onclick="payAccount()">现金支付</span>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div class="am-g" align="center" style="margin-top: 50px;">
    <div class="am-u-sm-12" onclick="sub()">
        <img src="${pageContext.request.contextPath}/images/comfirm.png" style="width: 100%;">
    </div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    var playType = 0;
    function payNet() {
        playType = 1;
        $("#net").addClass("active");
        $("#account").removeClass("active");
    }
    function payAccount() {
        playType = 2;
        $("#account").addClass("active");
        $("#net").removeClass("active");
    }
    function sub() {
        var desc = $("#result").val();
        var money = $("#monye").val();
        if (desc == "") {
            layer.msg("请填写处理结果。");
            return;
        }
        if (money == "") {
            layer.msg("请填写金额。");
            return;
        }
        if (playType == 0) {
            layer.msg("请选择支付方式。");
            return;
        }
        var json = {
            'desc': desc,
            'money': money,
            'playType': playType,
            'error': "success}"
        }
        $.ajax({
            type: "post",
            data: json,
            url: '${pageContext.request.contextPath}/clientMaintenance/maintenanceComplete',
            dataType: 'json',
            success: function (data) {
                if (data.success) {
                    setInterval(function () {
                        window.location.href = "${pageContext.request.contextPath}/clientHome/goStaffFixOrderList";
                    }, 2000);
                    layer.msg('提交成功，2秒后返回。');
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function () {
                layer.msg('网络超时');
            }

        });
    }
</script>
</body>

</html>
